{% extends 'base.html' %}
{% comment %}
4.0 TODO: This file should be replaced by the 'system_jobs/import_objects.html' template eventually,
but for now many CSV import views still exist which use this template.
{% endcomment %}
{% load helpers %}
{% load form_helpers %}

{% block extra_styles %}
    <style>
        .tab-content {
            display: flex;
        }

        .tab-content > .tab-pane {
            display: block; /* undo "display: none;" */
            visibility: hidden;
            margin-right: -100%;
            width: 100%;
        }

        .tab-content > .active {
            visibility: visible;
        }
    </style>
{% endblock %}

{% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %}

{% block content %}
    {% block tabs %}{% endblock %}
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            {% if form.non_field_errors %}
                <div class="card border-danger">
                    <div class="card-header bg-danger-subtle border-danger text-body">
                        <strong>Errors</strong>
                    </div>
                    <div class="card-body">
                        {{ form.non_field_errors }}
                    </div>
                </div>
            {% endif %}
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link{% if active_tab == 'csv-data' %} active{% endif %}" href="#csv-text" role="tab" data-bs-toggle="tab">CSV Data</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link{% if active_tab == 'csv-file' %} active{% endif %}" href="#csv-file" role="tab" data-bs-toggle="tab">CSV File Upload</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade{% if active_tab == 'csv-data' %} show active{% endif %}" id="csv-text">
                    <form action="" method="post" class="py-16">
                        {% csrf_token %}
                        {% render_field form.csv_data %}
                        <div class="gap-8 hstack justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                                -->Submit
                            </button>
                            {% if return_url %}
                                <a href="{{ return_url }}" class="btn btn-secondary">
                                    <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
                                    -->Cancel
                                </a>
                            {% endif %}
                        </div>
                    </form>
                </div>
                <div role="tabpanel" class="tab-pane fade{% if active_tab == 'csv-file' %} show active{% endif %}" id="csv-file">
                    <form action="" method="post" enctype="multipart/form-data" class="py-16">
                        {% csrf_token %}
                        <input type="hidden" name="csv_data" value="{{ form.csv_data.initial }}">
                        {% render_field form.csv_file %}
                        <div class="gap-8 hstack justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                                -->Submit
                            </button>
                            {% if return_url %}
                                <a href="{{ return_url }}" class="btn btn-secondary">
                                    <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
                                    -->Cancel
                                </a>
                            {% endif %}
                        </div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
            {% if fields %}
                <div class="card">
                    <div class="card-header">
                        <strong>CSV Field Options</strong>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <tr>
                                <th>Field</th>
                                <th>Required</th>
                                <th>Description</th>
                            </tr>
                            {% for field in fields %}
                                <tr>
                                    <td>
                                        <code>{{ field.name }}</code>
                                    </td>
                                    <td>{{ field.required | render_boolean }}</td>
                                    <td>
                                        {% if field.choices %}
                                            <button type="button" class="btn btn-link btn-sm float-end" data-bs-toggle="modal" data-bs-target="#{{ field.name }}_choices">
                                                <span aria-hidden="true" class="mdi mdi-help-circle"></span>
                                            </button>
                                            <div class="modal fade" id="{{ field.name }}_choices" tabindex="-1" role="dialog">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            <h4 class="modal-title"><code>{{ field.name }}</code> Choices</h4>
                                                        </div>
                                                        <table class="table table-striped modal-body">
                                                            <tr><th>Import Value</th><th>Label</th></tr>
                                                            {% for value, label in field.choices.items %}
                                                                {% if value %}<tr><td><samp>{{ value }}</samp></td><td>{{ label }}</td></tr>{% endif %}
                                                            {% endfor %}
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if field.help_text %}
                                            {{ field.help_text }}<br />
                                        {% elif field.label %}
                                            {{ field.label }}<br />
                                        {% endif %}
                                        {% if field.format %}
                                            <small class="text-secondary">Format: {{ field.format }}</small>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
                <p class="small text-secondary">
                    <span aria-hidden="true" class="mdi mdi-check-bold"></span> Required fields <strong>must</strong> be specified for all
                    objects.
                </p>
                <p class="small text-secondary">
                    <span aria-hidden="true" class="mdi mdi-information-outline"></span> Related objects may be referenced by their UUID and/or by their natural key unique field combinations. e.g `location__name`, `location__parent__name`. You can find this information in the "Advanced" tab of any object's detail view.
                </p>
            {% endif %}
        </div>
    </div>
{% endblock %}
